<template>
  <div>
    <common-card
      :title="$t('dashboard.totalOrder')"
      :value="this.totalOrder"
    >
      <!-- 中间图表 -->
      <template>
        <div
          class="com-chart"
          ref="total_orders_ref"
          :style="{width: '100%' , height:'100%'}"
        ></div>
      </template>

      <!-- 底部数据 -->
      <template v-slot:footer>
        <span>{{$t('dashboard.transactionOrderVolume')}} </span>
        <span class="emphasis">{{payOrder}}</span>
      </template>
    </common-card>
  </div>
</template>

<script>
import homeview from "@/api/homeview";
import CommonCard from "../CommonCard";
export default {
  name: "index",
  components: {
    CommonCard,
  },
  data() {
    return {
      chartInstance: null,
      page_num: 1,
      page_size: 100, 
      orderArr: [], //所有订单
      totalOrder: 0, //生成订单量
      payOrder: 0, //已支付订单
      unpayOrder: 0, //未支付订单
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 获取服务器的数据
    getData() {
      homeview
        .getOrderNum(this.page_num, this.page_size)
        .then((res) => {
          // console.log(res);
          this.totalOrder = res.data.orderList.total;
          this.orderArr = res.data.orderList.list;
          // console.log(this.orderArr);

          //获取已支付和未支付订单量
          let pay_item = {};
          for (let i = 0; i < this.orderArr.length; i++) {
            pay_item[this.orderArr[i].is_pay] =
              ~~pay_item[this.orderArr[i].is_pay] + 1;
          }
          // console.log(pay_item);
          this.payOrder = pay_item["1"];
          this.unpayOrder = pay_item["0"];
          // console.log(this.payOrder)
          // console.log(this.unpayOrder)
        })
        .catch((error) => {
          "error";
        });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
